<div style="margin-top:45px;" v-if="status">

	<!-- 图标 -->
	<a-alert v-if="!status.connect"
		message="警告"
		description="老虎机掉线啦！！！"
		type="warning"
		showIcon
	></a-alert>

	<a-card v-if="status.data">
		<p style="font-size:48px;text-align:center;margin-bottom:20px">
			<span v-for="(stop,index) in status.data.stop" style="margin-left:30px; margin-right: 30px;">
				<a-tooltip placement="bottomLeft" v-if="!stop">
					<span slot="title">
						摇到各个数的可能性<br/>
						<template v-for="(p,index2) in probability[index]">
							<span v-if="p == 0">
								<a-tag color="purple"> {{ index2 }} </a-tag> 0 %
							</span>
							<span v-else-if="p <= 0.1">
								<a-tag color="cyan"> {{ index2 }} </a-tag> {{ (p * 100).toFixed(2) }} %
							</span>
							<span v-else>
								<a-tag color="orange"> {{ index2 }} </a-tag> {{ (p * 100).toFixed(2) }} %
							</span>
							<br/>
						</template>
					</span>
					<a-icon type="sync" v-if="status.data.pressed[index]" spin></a-icon>
					<a-icon type="loading" v-else></a-icon>
				</a-tooltip>
				<span v-else>{{status.data.slots[index]}}</span>
			</span>
		</p>
	</a-card>

	<a-row style="margin-top:30px;">
		<a-button type="primary" @click="btnRun()">启动</a-button>
		<a-button @click="btnStop(0)">1号暂停</a-button>
		<a-button @click="btnStop(1)">2号暂停</a-button>
		<a-button @click="btnStop(2)">3号暂停</a-button>
	</a-row>

	<template v-if="status.data">
		<a-descriptions :title="'背景音乐：' + ((status.data.trackerEnable) ? '已开启' : '已关闭')"
			style="margin-top:30px;"></a-descriptions>
		<a-button-group>
			<a-button @click="btnAudioEnable" >音频开启</a-button>
			<a-button @click="btnAudioDisable">音频关闭</a-button>
		</a-button-group>
		&emsp; <span>点击按钮，立即生效。</span>
		<i>浏览器播放时，请先点击一下老虎机页面，否则音乐可能无法正常播放。</i>
	</template>

	<template v-if="status.data">
		<a-descriptions :title="'配置 摇到的值自动删除：' + ((status.data.autoRemoveEnable) ? '已开启' : '已关闭')"
			style="margin-top:30px;"></a-descriptions>
		<a-button-group>
			<a-button @click="btnAutoRemoveEnable" >配置开启</a-button>
			<a-button @click="btnAutoRemoveDisable">配置关闭</a-button>
		</a-button-group>
		&emsp; <span>点击按钮，立即生效。</span> &emsp; 
		<p v-if="status.data.autoRemoveHistroy && status.data.autoRemoveHistroy.length" style="margin-top: 10px;">
			摇到数值历史记录：
			<span v-for="item in status.data.autoRemoveHistroy" key="item.join(',')">{{ item.join(' ') }} &emsp;</span>
		</p>
	</template>
</div>
